<template>
  <div class="index-box">
    <Header></Header>
    
    <div class="router-view">
     
      <img src="../../assets/images/licang/zz.png" alt="">
      <Map />
      <div class="wrap">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/header/index"; //头部
import Map from '@/components/amap'
export default {
  components: {
    Header,
    Map
  },
  data() {
    return {
      
    };
  },
  created() {},
  mounted() {
  },
  methods: {
    
  },
};
</script>

<style lang="scss" scoped>
  .index-box {
    width: 100%;
    height: 100%;

    .router-view {
      /* padding: 20px 40px; */
      position: relative;
      width: 100%;
      height: calc(100% - 90px);
      top: -31px;
      /* padding-top: 31px; */

      img {
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 1;
        left: 0;
        pointer-events: none;
        top: 0;
      }
      .view{
        position: relative;
        z-index: 10;
      }

    }
  }


  // .fade-enter-active {
  //   transition: height 1s;
  // }
  .fade-leave-active {
    // transition: none;
    transition: opacity 0.6s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
    // height: 0;
  }
  .router-view {
    position: relative;
  }
  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    padding: 28px 40px;
  }
</style>